const path = require('path') // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, '../dist'), // 绝对路径
        // 文件名（入口文件打包输出文件名）
        filename: 'static/js/main.js',
        // 自动清空上一次的打包的内容
        // 原理：在打包前，将 path 整个目录内容清空，再进行打包
        clean: true,
    },
    // 加载器
    module: {
        rules: [
            // loader 的配置
            {
                test: /\.css$/i,
                // 执行顺序是从下往上，从右往左
                use: [
                    MiniCssExtractPlugin.loader,
                     "css-loader",
                     // 使用默认配置可以直接使用 postcss-loader
                     {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ]
                            }
                        }
                     }
                ]
            },
            {
                test: /\.less$/i,
                // 使用 loader 属性的话，只能引入一个 loader
                use: [
                    MiniCssExtractPlugin.loader, 
                    "css-loader", 
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ]
                            }
                        }
                     },
                    "less-loader",
                ]
            },
            {
                test: /\.s[ac]ss$/i,
                // 执行顺序是从下往上，从右往左
                use: [
                    MiniCssExtractPlugin.loader, 
                    "css-loader",
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ]
                            }
                        }
                     },
                     "sass-loader"
                    ]
            },
            {
                test: /\.styl$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                     "css-loader", 
                     {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: [
                                    "postcss-preset-env", // 能解决大多数样式兼容性问题
                                ]
                            }
                        }
                     },
                     "stylus-loader"
                    ]
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转成base64
                        // 优点：减少请求数量 缺点：体积会更大
                        maxSize: 100 * 1024 // 100kb
                    }
                },
                generator: {
                    // 输出图片名称
                    // [hash: 10] hash 值取前 10 位
                    filename: "static/images/[hash:10][ext][query]"
                }
            },            
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    // 输出名称
                    filename: "static/media/[hash:10][ext][query]",
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除其中的js文件
                loader: "babel-loader",
                options: {
                    // presets: ["@babel/preset-env"],
                }
            }
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "../src"),
        }),
        new HtmlWebpackPlugin({
            // 模板：以 public/index.html 文件创建的html文件
            // 新的 html 文件特点：1.结构和原来一致 2.自动引入打包输出资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        new MiniCssExtractPlugin({
            filename: "static/css/main.css"
        })
    ],
    optimization: {
        minimizer: [
          // 在 webpack@5 中，你可以使用 '...' 语法来扩展 minimizer（即'terser-webpack-plugin'）
          new CssMinimizerPlugin(),
        ]
    },
    // 模式
    mode: 'production'
}